<template>
	<section class="vbox">
		<section class="scrollable wrapper-lg">
			<div class="row">
				<div class="col-sm-8">
					<div class="panel">
						<iframe v-if="'9999' != model.source" height=538 width=100% :src="model.url" frameborder="0" allowfullscreen="true"></iframe>
						<!-- <videoPlayer v-else></videoPlayer> -->
						<video-player v-else class="video-player vjs-custom-skin" :options="playerOptions" @ready="playerReadied">
						</video-player>
						
						<div class="wrapper-lg">
							<h2 class="m-t-none text-black">{{ model.title }}</h2>
							<div class="line b-b"></div>
							<div class="text-muted">
								<i class="fa fa-link icon-muted"></i> 来源：<span class="m-r-sm">{{ model.source | filterSysDict(webSites) }}</span>
								<i class="fa fa-user icon-muted"></i> 编辑： <a href="#" class="m-r-sm">{{ model.createUser }}</a>
								<i class="fa fa-clock-o icon-muted"></i>&nbsp;<span class="m-r-sm">{{ model.createTime }}</span>
								<i class="fa fa-comment-o icon-muted"></i> 评论 <a href="#" class="m-r-sm"> {{ model.commentCount }}</a>
								<i class="fa fa-eye icon-muted"></i> 浏览 <a href="#" class="m-r-sm">{{ model.viewsCount }}</a>
								<i class="fa fa-heart-o icon-muted"></i> 喜欢 <a href="#" class="m-r-sm">{{ model.likeCount }}</a>
							</div>
							<div class="line b-b"></div>
							<div class="post-sum" v-html="model.intr"></div>
						</div>
					</div>
					<!-- <v-comment></v-comment> -->
				</div>
				<div class="col-sm-4">
					<div class="panel panel-default">
						<div class="panel-heading">推荐</div>
						<div class="panel-body">
							<article class="media">
								<a href="#" class="pull-left thumb-lg m-t-xs">
									<img src="/static/images/m40.jpg">
								</a>
								<div class="media-body">
									<a href="#" class="font-semibold">喜马拉雅</a>
									<div class="text-xs block m-t-xs"><a href="#">禅心</a> 2 分钟 前</div>
								</div>
							</article>
							<article class="media">
								<a href="#" class="pull-left thumb-lg m-t-xs">
									<img src="/static/images/m41.jpg">
								</a>
								<div class="media-body">
									<a href="#" class="font-semibold">天空</a>
									<div class="text-xs block m-t-xs"><a href="#">禅心</a> 2 小时 前</div>
								</div>
							</article>
							<article class="media">
								<a href="#" class="pull-left thumb-lg m-t-xs">
									<img src="/static/images/m42.jpg">
								</a>
								<div class="media-body">
									<a href="#" class="font-semibold">时光如梭</a>
									<div class="text-xs block m-t-xs"><a href="#">禅心</a> 1 周 前</div>
								</div>
							</article>
							<article class="media">
								<a href="#" class="pull-left thumb-lg m-t-xs">
									<img src="/static/images/m43.jpg">
								</a>
								<div class="media-body">
									<a href="#" class="font-semibold">回首</a>
									<div class="text-xs block m-t-xs"><a href="#">禅心</a> 1 周 前</div>
								</div>
							</article>
							<article class="media">
								<a href="#" class="pull-left thumb-lg m-t-xs">
									<img src="/static/images/m44.jpg">
								</a>
								<div class="media-body">
									<a href="#" class="font-semibold">浪迹天涯</a>
									<div class="text-xs block m-t-xs"><a href="#">禅心</a> 1 周 前</div>
								</div>
							</article>
							<article class="media">
								<a href="#" class="pull-left thumb-lg m-t-xs">
									<img src="/static/images/m45.jpg">
								</a>
								<div class="media-body">
									<a href="#" class="font-semibold">满园春色</a>
									<div class="text-xs block m-t-xs"><a href="#">禅心</a> 1 周 前</div>
								</div>
							</article>
						</div>
					</div>
				</div>
			</div>
		</section>
		<btn-goback></btn-goback>
	</section>
</template>

<script>
	// videojs
	import videojs from 'video.js'
	window.videojs = videojs
	// hls plugin for videojs6 支持m3u8格式插件
	require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
	
	// 播放 RTMP 流，需要安装 videojs-flash 插件
	require('videojs-flash/dist/videojs-flash.min.js')
	
	import vComment from '@/components/Comment'

	export default {
		props: ['id'],
		components: {
			// videoPlayer
			vComment
		},
		data() {
			return {
				webSites: [],
				model: {
					mediaType: 'audio',
					source: '1',
					createUser: '1',
					createTime: '',
					publish: true,
					intr: '',
					content: '',
					commentCount: 0,
					viewsCount: 0,
					likeCount: 0
				},
				playerOptions: {
					// videojs and plugin options
					// height: '360',
					language: 'zh-CN',
					preload: 'auto',
					// aspectRatio: '16:9',// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。
					fluid: true, // 当true时，Video.js player将拥有流体大小，按比例缩放以适应其容器。
					notSupportedMessage: '此视频暂无法播放，请稍后再试',
					sources: [],
					controlBar: {
						remainingTimeDisplay: false,
// 						timeDivider: false,
// 						durationDisplay: false
					},
					flash: {
						hls: {
							withCredentials: false
						}
					},
					html5: {
						hls: {
							withCredentials: false
						}
					},
					poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
				}
			}
		},
		mounted() {
			this.$api.sysDict.queryByParentCode("website").then(data => {
				this.webSites = data;
			});

			//业务逻辑
			const params = this.$route.params;
			console.debug('params:', params);
			if (null != params.id) {
				this.$api.video.queryById(params.id).then(data => {
					this.model = data;
					document.title = document.title + ' | ' + this.model.title;
					if ('9999' == this.model.source) {
						this.playerOptions.poster = data.poster;
						this.playerOptions.sources = [{
							withCredentials: false,
							// type: "application/x-mpegURL",
							src: this.model.url
						}];
						// 						VideoPlayer.setMedia({
						// 							title: this.model.title,
						// 							rtmp: this.model.url,
						// 							poster: this.model.poster
						// 						});
					}

				});
			}

			// 			VideoPlayer.setMedia({
			// 				title: "新喜剧之王-疾风少女",
			// 				webmv: "http://qukufile2.qianqian.com/data2/video/196a34ae006e7eeda1d8b9827c70f96b/611883164/611883164.mp4",
			// 				poster: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548486934&di=d92cb09a361749edbf65e25ab2f5d11f&imgtype=jpg&er=1&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F7316423340%2F1000"
			// 			});
		},
		methods: {
			playerReadied(player) {
				var hls = player.tech({
					IWillNotUseThisInPlugins: true
				}).hls
				player.tech_.hls.xhr.beforeRequest = function(options) {
					//options.headers['User-Agent'] = 'ytbuy.eospbx.bx/1.5.1 (Linux;Android 6.0.1) ExoPlayerLib/2.8.4';
					console.log("options",options)
					return options
				}
			}
		},
		filters: {
			filterSysDict(key, data) {
				console.debug('filter key:', key);
				var name = "其他";
				console.debug('data:', data);
				for (let i = 0; i < data.length; i++) {
					console.debug('data[i].code:', data[i].code);
					if (data[i].code == key) {
						name = data[i].name;
						console.debug('name:', name);
						break;
					}
				}
				console.debug('filter name:', name);
				return name;
			}
		}
	}
</script>

<style>
	@import url("~video.js/dist/video-js.css");
	@import url("~vue-video-player/src/custom-theme.css");
	
	/* 播放按钮换成圆形 */
	.video-js .vjs-big-play-button {

		height: 2em;
		width: 2em;
		line-height: 2em;
		border-radius: 1em;
	}
</style>
